import React,{ useState,useEffect } from 'react'
import { Routes, Route, BrowserRouter,Link } from 'react-router-dom'
import {TransitionGroup,CSSTransition} from 'react-transition-group'
import './App.css'

const Home = () => {
  return (
    <div className='page home'>
    Home
    </div>
  )
}
const About = () => {
  return (
    <div className='page about'>
    About
    </div>
  )
}

function App() {
  const [count,setCount]=useState(1);
  useEffect(() => {
    console.log('update');
    return () => {
      console.log('卸载')
    }
  }, [count])

  return (
    <BrowserRouter>
    <button onClick={()=>setCount(count+1)}>点击</button>
      <nav>
        <Link to='/'>Too</Link>
        <br />
        <Link to='/about'>about</Link>
      </nav>
      <TransitionGroup
        className={'router-wrapper'}
        childFactory={child=>React.cloneElement(child,('forward-from-right-enter'))}
      >
      <CSSTransition timeout={5000} >
      <Routes>
        {/* <Route path="/" exact component={Home} />
        <Route path="/about" component={About} /> */}
        <Route path="/" exact element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>  
      </CSSTransition>
      </TransitionGroup>
    </BrowserRouter>
  )
}

export default App